<script setup lang="ts">
import { reactive } from 'vue';
import ApiTestFile from './ApiTestFile.vue';
import ApiTestSqlite from './ApiTestSqlite.vue';

const props: any = defineProps<{
    ujt: any;
}>();
const { $fn } = props.ujt;
const rfKddData: any = reactive({
    server: 'webserver',
    url: '/api/init/code/',
    method: 'get',
    data: '',
    type: 0,
});
function apiSubmitJsonp() {
    // http://localhost:9198/jsonp/?path=jsontest.json
    $fn.As.apiJsonp(rfKddData.url, (data: any) => {
        rfKddData.data = data;
        console.log(666.118, data);
    });
}
function apiSubmit() {
    if (rfKddData.method === 'post') {
        $fn.api[rfKddData.server]
            .apiPost(rfKddData.url, rfKddData.data)
            .then((res: any) => {
                console.log(666.112, res);
                if (typeof res.data === 'object') {
                    rfKddData.data = JSON.stringify(res.data);
                } else {
                    rfKddData.data = res.data;
                }
            });
    } else {
        $fn.api[rfKddData.server]
            .apiGet(rfKddData.url, rfKddData.data)
            .then((res: any) => {
                console.log(666.113, res);
                if (typeof res.data === 'object') {
                    rfKddData.data = JSON.stringify(res.data);
                } else {
                    rfKddData.data = res.data;
                }
            });
    }
}
</script>

<template>
    <div id="api">
        <label for="server">
            <i>SERVER:</i>
            <input name="server" v-model="rfKddData.server" />
        </label>
        <label for="url">
            <i>URL:</i>
            <input name="url" v-model="rfKddData.url" />
        </label>
        <label for="method">
            <i>METHOD:</i>
            <input name="method" v-model="rfKddData.method" />
        </label>
        <label for="data">
            <i>DATA:</i>
            <input name="data" v-model="rfKddData.data" />
        </label>
        <button @pointerdown="apiSubmit()">测试Api</button>
        <button @pointerdown="apiSubmitJsonp()">测试Jsonp</button>
        <template v-if="rfKddData.data">
            <h2>RES:</h2>
            <div id="res">{{ rfKddData.data }}</div>
        </template>
        <hr />
        <h2>{{ rfKddData.type == 1 ? 'SQLite' : 'File' }}</h2>
        <button @pointerdown="rfKddData.type = 0">File</button>
        <button @pointerdown="rfKddData.type = 1">SQLite</button>
        <template v-if="rfKddData.type == 0">
            <ApiTestFile :ujt="props.ujt" />
        </template>
        <template v-if="rfKddData.type == 1">
            <ApiTestSqlite :ujt="props.ujt" />
        </template>
    </div>
</template>

<style scoped lang="scss">
button {
    height: 38px;
    padding: 0 12px;
    margin-right: 12px;
    background-color: var(--cm8);
    color: var(--cm0);
}
label {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0;
    i {
        display: inline-block;
        width: 100px;
        text-align: right;
    }
    input {
        border: 1px solid var(--cm8);
        padding: 6px 12px;
        margin: 0 12px;
        flex-grow: 1;
    }
}
#api {
    margin: 0 auto;
    * {
        font-size: 14px;
    }
}
#res {
    text-align: left;
    word-wrap: break-word;
}
</style>
